<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); margin-bottom: 30px"
      sub-title="考试填空"
      @back="fanhui()"
    />
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 难度 -->

      <div>
        <el-form-item label="难度" style="display: inline-block">
          <el-select v-model="ruleForm.nname" placeholder="请选择难度">
            <el-option
              v-for="(v, i) of selList.nList"
              :key="i"
              :label="v.nname"
              :value="v.nid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称" style="display: inline-block">
          <el-select v-model="ruleForm.sname" placeholder="请选择课程名称">
            <el-option
              v-for="(v, i) of selList.kList"
              :key="i"
              :label="v.sname"
              :value="v.sid"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>

      <el-form-item label="题干">
        <div ref="box"></div>
      </el-form-item>

      <el-form-item label="答案">
        <div v-for="(v, i) of box" :key="i" style="margin-bottom: 10px">
          <p style="font-size: 30px">答案{{ i + 1 }}</p>
          <div>
            <div
              :ref="v.ref"
              style="width: 70%; margin-right: 20px; float: left"
            ></div>
            <div style="float: left">
              <el-button
                icon="el-icon-minus"
                style="margin-top: 10px"
                @click="delbox(i)"
                circle
                v-if="i != 0"
              ></el-button>
            </div>
          </div>
          <div style="clear: both"></div>
        </div>
        <el-button
          icon="el-icon-plus"
          @click="crebox()"
          style="margin-top: 10px"
          v-show="box.length != 26"
          >添加选项</el-button
        >
      </el-form-item>
      <el-form-item label="解析">
        <div ref="box1"></div>
      </el-form-item>
      <el-form-item label="知识点">
        <div ref="box2"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import E from "wangeditor";
import hljs from "highlight.js";
import axios from "../../api/ItemManagement";
export default {
  data() {
    return {
      radio: 0,
      editor: null,
      editor1: null,
      editor2: null,
      box: [
        {
          ref: "box3",
          editor: "editor3",
        },
      ],
      alphabet: [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
      ],
      nunm: 6,
      //下拉框数据
      selList: {
        nList: [],
        kList: [],
      },
      //表单数据
      ruleForm: {
        nname: "",
        sname: "",
      },
      //富文本菜单
      menus: [
        "strikeThrough",
        "foreColor",
        "underline",
        "image",
        "code",
        "undo",
      ],
      fontSizes: {
        "x-small": { name: "10px", value: "1" },
        small: { name: "13px", value: "2" },
        normal: { name: "16px", value: "3" },
        large: { name: "18px", value: "4" },
        "x-large": { name: "24px", value: "5" },
        "xx-large": { name: "32px", value: "6" },
        "xxx-large": { name: "48px", value: "7" },
      },
    };
  },
  methods: {
    fanhui() {
      this.$router.push("/home?name=题库管理");
    },
    //初始化下拉框数据
    selLists() {
      axios
        .nList()
        .then((res) => {
          this.selList.nList = res.data.list;
          this.ruleForm.nname = res.data.list[0].nid;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
      axios
        .kList()
        .then((res) => {
          this.selList.kList = res.data.list.list;
          this.ruleForm.sname = res.data.list.list[0].sid;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    //添加数据
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let arr = [];
          for (let i in this.box) {
            arr.push({
              content: this.box[i].editor.txt.html(),
              isRight: 1,
            });
          }
          let data = {
            analysis: this.editor1.txt.html(), //解析
            answerList: arr, //答案
            nid: this.ruleForm.nname, //难度
            remark: this.editor2.txt.html(), //知识点
            sid: this.ruleForm.sname, //科目
            tid: this.$route.query.id,
            title: this.editor.txt.html(), //题干
          };
          // console.log(data);
          // return;
          if (data.title == "") {
            this.$message({
              message: "题干不能为空",
              type: "warning",
            });
            return;
          }
          axios
            .xiangqingDTO(data)
            .then((res) => {
              if (res.data.code === 20000) {
                this.$message(res.data.msg);
                window.history.go(-1); //返回上一页
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                });
              }
            })
            .catch((error) => {
              this.$message.error(error.message);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //添加选项框
    crebox(val) {
      this.nunm++;
      const boxs = "box" + this.nunm;
      this.box.push({
        ref: boxs,
      });
      let box = this.box[this.box.length - 1];
      setTimeout(() => {
        box.editor = new E(this.$refs[boxs]);
        box.editor.config.height = 70;
        box.editor.config.menus = this.menus;
        box.editor.config.fontSizes = this.fontSizes;
        box.editor.config.menuTooltipPosition = "down";
        box.editor.config.zIndex = 99 - this.box.length;
        box.editor.highlight = hljs;
        box.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
          // resultFiles 是 input 中选中的文件列表
          // insertImgFn 是获取图片 url 后，插入到编辑器的方法
          let formData = new FormData();
          formData.append("file", resultFiles[0]);
          axios
            .upload(formData)
            .then((res) => {
              if (res.data.code == 20000) {
                insertImgFn(res.data.url);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((error) => {
              this.$message.error(error.message);
            });
        };
        box.editor.create();
        if (val) {
          box.editor.txt.html(val);
        }
      }, 10);
    },
    //删除选项框
    delbox(i) {
      this.radio = 0;
      let arr = [];
      for (let q = 0; q < this.box.length; q++) {
        arr.push(this.box[q].editor.txt.html());
      }
      arr.splice(i, 1);
      this.box = [];
      for (let w = 0; w < arr.length; w++) {
        setTimeout(() => {
          this.crebox(arr[w]);
        }, 15);
      }
    },
  },
  mounted() {
    this.selLists();

    this.editor = new E(this.$refs.box);
    this.editor.config.height = 70;
    this.editor.config.menus = this.menus;
    this.editor.config.fontSizes = this.fontSizes;
    this.editor.config.menuTooltipPosition = "down";
    this.editor.config.zIndex = 100;
    this.editor.highlight = hljs;
    this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      let formData = new FormData();
      formData.append("file", resultFiles[0]);
      axios
        .upload(formData)
        .then((res) => {
          if (res.data.code == 20000) {
            insertImgFn(res.data.url);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    };
    this.editor.create();

    for (let i = 0; i < this.box.length; i++) {
      console.log();
      this.box[i].editor = new E(this.$refs[this.box[i].ref]);
      this.box[i].editor.config.height = 70;
      this.box[i].editor.config.menus = this.menus;
      this.box[i].editor.config.fontSizes = this.fontSizes;
      this.box[i].editor.config.menuTooltipPosition = "down";
      this.box[i].editor.config.zIndex = 99 - i;
      this.box[i].editor.highlight = hljs;
      this.box[i].editor.config.customUploadImg = (
        resultFiles,
        insertImgFn
      ) => {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        let formData = new FormData();
        formData.append("file", resultFiles[0]);
        axios
          .upload(formData)
          .then((res) => {
            if (res.data.code == 20000) {
              insertImgFn(res.data.url);
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      };
      this.box[i].editor.create();
    }

    this.editor1 = new E(this.$refs.box1);
    this.editor1.config.height = 100;
    this.editor1.config.menus = this.menus;
    this.editor1.config.fontSizes = this.fontSizes;
    this.editor1.config.menuTooltipPosition = "down";
    this.editor1.config.zIndex = 50;
    this.editor1.highlight = hljs;
    this.editor1.config.customUploadImg = (resultFiles, insertImgFn) => {
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      let formData = new FormData();
      formData.append("file", resultFiles[0]);
      axios
        .upload(formData)
        .then((res) => {
          if (res.data.code == 20000) {
            insertImgFn(res.data.url);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    };
    this.editor1.create();

    this.editor2 = new E(this.$refs.box2);
    this.editor2.config.height = 100;
    this.editor2.config.menus = this.menus;
    this.editor2.config.fontSizes = this.fontSizes;
    this.editor2.config.menuTooltipPosition = "down";
    this.editor2.config.zIndex = 49;
    this.editor2.highlight = hljs;
    this.editor2.config.customUploadImg = (resultFiles, insertImgFn) => {
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      let formData = new FormData();
      formData.append("file", resultFiles[0]);
      axios
        .upload(formData)
        .then((res) => {
          if (res.data.code == 20000) {
            insertImgFn(res.data.url);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    };
    this.editor2.create();
  },
};
</script>
